<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>投票中心 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 搜索和筛选 */
    .search-filter {
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .search-bar {
      position: relative;
      margin-bottom: 10px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f8f9fa;
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .filter-tabs {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      gap: 10px;
    }
    
    .filter-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .filter-tab {
      padding: 6px 14px;
      background-color: #f5f5f5;
      border-radius: 15px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .filter-tab.active {
      background-color: #3498db;
      color: white;
    }
    
    /* 投票列表容器 */
    .votes-container {
      padding: 10px;
    }
    
    /* 投票项通用样式 */
    .vote-item {
      background-color: white;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    .vote-header {
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .vote-creator {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .creator-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .creator-info {
      flex: 1;
    }
    
    .creator-name {
      font-size: 15px;
      font-weight: 500;
    }
    
    .vote-time {
      font-size: 12px;
      color: #999;
    }
    
    .vote-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .vote-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    
    .vote-meta {
      display: flex;
      font-size: 13px;
      color: #999;
    }
    
    .vote-meta span {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
    
    .vote-meta i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    /* 投票选项容器 */
    .vote-options {
      padding: 10px 15px 15px;
    }
    
    .vote-type {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
      padding-left: 5px;
    }
    
    /* 无图投票选项 */
    .option-text {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px 15px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .option-text.selected {
      border-color: #3498db;
      background-color: #f0f7ff;
    }
    
    .option-text .option-label {
      font-size: 15px;
      margin-bottom: 5px;
    }
    
    .option-text .option-desc {
      font-size: 13px;
      color: #666;
    }
    
    /* 单图投票选项 */
    .option-single-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .option-single-img.selected {
      border-color: #3498db;
    }
    
    .option-single-img img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .option-single-img .option-info {
      padding: 10px 15px;
    }
    
    /* 多图投票选项 */
    .option-multi-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 12px 15px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .option-multi-img.selected {
      border-color: #3498db;
      background-color: #f0f7ff;
    }
    
    .multi-img-container {
      display: flex;
      gap: 5px;
      margin-bottom: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .multi-img-container img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    /* 投票进度条 */
    .option-progress {
      margin-top: 8px;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 5px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: #3498db;
      border-radius: 4px;
      width: 0%;
      transition: width 0.5s ease;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
    }
    
    /* 投票按钮 */
    .vote-btn {
      width: 100%;
      padding: 10px 0;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      margin-top: 5px;
    }
    
    .vote-btn.voted {
      background-color: #2ecc71;
    }
    
    /* 投票操作栏 */
    .vote-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 10px 15px;
      border-top: 1px solid #f0f0f0;
    }
    
    .vote-action {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
      font-size: 14px;
      cursor: pointer;
    }
    
    .vote-action i {
      font-size: 16px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 投票选择框样式 */
    .option-checkbox, .option-radio {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .option-checkbox {
      border-radius: 4px;
    }
    
    .option-checkbox.checked::after, .option-radio.checked::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      font-size: 12px;
      color: white;
    }
    
    .option-checkbox.checked, .option-radio.checked {
      background-color: #3498db;
      border-color: #3498db;
    }
    
    .option-text {
      position: relative;
      padding-right: 40px;
    }
    
    .option-multi-img {
      position: relative;
      padding-right: 40px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">投票中心</h1>
    <button class="btn btn-link p-0 nav-btn" id="createVoteBtn">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  
  <!-- 搜索和筛选 -->
  <div class="search-filter">
    <div class="search-bar">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索投票话题...">
    </div>
    
    <div class="filter-tabs">
      <div class="filter-tab active">全部投票</div>
      <div class="filter-tab">我发起的</div>
      <div class="filter-tab">我参与的</div>
      <div class="filter-tab">单选投票</div>
      <div class="filter-tab">多选投票</div>
      <div class="filter-tab">热门投票</div>
      <div class="filter-tab">最新发布</div>
    </div>
  </div>
  
  <!-- 投票列表 -->
  <div class="votes-container">
    <!-- 1. 无图单选投票 -->
    <div class="vote-item">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">音乐爱好者</div>
            <div class="vote-time">2小时前</div>
          </div>
        </div>
        
        <div class="vote-title">你最喜欢的音乐节类型是？</div>
        
        <div class="vote-desc">
          随着夏季到来，各种音乐节开始增多，想了解大家最喜欢的音乐节类型，后续可能组织相应活动哦~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 248人参与</span>
          <span><i class="fa fa-clock-o"></i> 剩余3天</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">单选投票</div>
        
        <div class="option-text" onclick="selectOption(this, false)">
          <div class="option-label">摇滚音乐节</div>
          <div class="option-desc">以摇滚音乐为主的现场演出</div>
          <div class="option-radio"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 45%;"></div>
            </div>
            <div class="progress-text">
              <span>45%</span>
              <span>112票</span>
            </div>
          </div>
        </div>
        
        <div class="option-text" onclick="selectOption(this, false)">
          <div class="option-label">电子音乐节</div>
          <div class="option-desc">以电子音乐和DJ表演为主</div>
          <div class="option-radio"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 30%;"></div>
            </div>
            <div class="progress-text">
              <span>30%</span>
              <span>74票</span>
            </div>
          </div>
        </div>
        
        <div class="option-text" onclick="selectOption(this, false)">
          <div class="option-label">民谣音乐节</div>
          <div class="option-desc">以民谣和轻音乐为主</div>
          <div class="option-radio"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 25%;"></div>
            </div>
            <div class="progress-text">
              <span>25%</span>
              <span>62票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn" onclick="submitVote(this)">提交投票</button>
      </div>
      
      <div class="vote-actions">
        <div class="vote-action" onclick="showComments(this)">
          <i class="fa fa-comment-o"></i>
          <span>评论 (32)</span>
        </div>
        <div class="vote-action" onclick="shareVote(this)">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="vote-action" onclick="saveVote(this)">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
    
    <!-- 2. 单图多选投票 -->
    <div class="vote-item">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">城市美食家</div>
            <div class="vote-time">昨天 15:30</div>
          </div>
        </div>
        
        <div class="vote-title">周末聚餐，你推荐哪家餐厅？</div>
        
        <div class="vote-desc">
          公司团队周末聚餐，预算人均150左右，大家帮忙推荐一下，可多选~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 86人参与</span>
          <span><i class="fa fa-clock-o"></i> 剩余1天</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">多选投票（最多选3项）</div>
        
        <div class="option-single-img" onclick="selectOption(this, true)">
          <img src="https://picsum.photos/800/400?random=10" alt="餐厅图片">
          <div class="option-info">
            <div class="option-label">青竹湘菜馆</div>
            <div class="option-desc">正宗湖南菜，招牌剁椒鱼头</div>
            <div class="option-progress">
              <div class="progress-bar-container">
                <div class="progress-bar" style="width: 42%;"></div>
              </div>
              <div class="progress-text">
                <span>42%</span>
                <span>36票</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="option-single-img" onclick="selectOption(this, true)">
          <img src="https://picsum.photos/800/400?random=11" alt="餐厅图片">
          <div class="option-info">
            <div class="option-label">海岸西餐厅</div>
            <div class="option-desc">牛排和披萨口碑不错</div>
            <div class="option-progress">
              <div class="progress-bar-container">
                <div class="progress-bar" style="width: 28%;"></div>
              </div>
              <div class="progress-text">
                <span>28%</span>
                <span>24票</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="option-single-img" onclick="selectOption(this, true)">
          <img src="https://picsum.photos/800/400?random=12" alt="餐厅图片">
          <div class="option-info">
            <div class="option-label">川味坊</div>
            <div class="option-desc">麻辣鲜香，适合能吃辣的朋友</div>
            <div class="option-progress">
              <div class="progress-bar-container">
                <div class="progress-bar" style="width: 30%;"></div>
              </div>
              <div class="progress-text">
                <span>30%</span>
                <span>26票</span>
              </div>
            </div>
          </div>
        </div>
        
        <button class="vote-btn" onclick="submitVote(this)">提交投票</button>
      </div>
      
      <div class="vote-actions">
        <div class="vote-action" onclick="showComments(this)">
          <i class="fa fa-comment-o"></i>
          <span>评论 (18)</span>
        </div>
        <div class="vote-action" onclick="shareVote(this)">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="vote-action" onclick="saveVote(this)">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
    
    <!-- 3. 多图单选投票 -->
    <div class="vote-item">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">旅行摄影师</div>
            <div class="vote-time">3天前</div>
          </div>
        </div>
        
        <div class="vote-title">哪组照片更适合作为旅行杂志封面？</div>
        
        <div class="vote-desc">
          最近拍摄的几组旅行照片，想选一组投稿给旅行杂志，大家帮忙选选看~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 325人参与</span>
          <span><i class="fa fa-clock-o"></i> 已结束</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">单选投票（已结束）</div>
        
        <div class="option-multi-img voted-option">
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=20" alt="照片1">
            <img src="https://picsum.photos/300/300?random=21" alt="照片2">
            <img src="https://picsum.photos/300/300?random=22" alt="照片3">
          </div>
          <div class="option-label">山川湖海系列</div>
          <div class="option-desc">包含雪山、湖泊和海洋的自然风光</div>
          <div class="option-radio checked"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 58%;"></div>
            </div>
            <div class="progress-text">
              <span>58%</span>
              <span>188票</span>
            </div>
          </div>
        </div>
        
        <div class="option-multi-img">
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=23" alt="照片4">
            <img src="https://picsum.photos/300/300?random=24" alt="照片5">
            <img src="https://picsum.photos/300/300?random=25" alt="照片6">
          </div>
          <div class="option-label">城市建筑系列</div>
          <div class="option-desc">不同城市的特色建筑和街景</div>
          <div class="option-radio"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 42%;"></div>
            </div>
            <div class="progress-text">
              <span>42%</span>
              <span>137票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn voted" disabled>已投票</button>
      </div>
      
      <div class="vote-actions">
        <div class="vote-action" onclick="showComments(this)">
          <i class="fa fa-comment-o"></i>
          <span>评论 (47)</span>
        </div>
        <div class="vote-action" onclick="shareVote(this)">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="vote-action" onclick="saveVote(this)">
          <i class="fa fa-bookmark"></i>
          <span>已收藏</span>
        </div>
      </div>
    </div>
    
    <!-- 4. 无图多选投票 -->
    <div class="vote-item">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">读书会组织者</div>
            <div class="vote-time">4天前</div>
          </div>
        </div>
        
        <div class="vote-title">下个月读书会，大家想读哪些类型的书？</div>
        
        <div class="vote-desc">
          为下个月的读书会做准备，大家可以多选几种感兴趣的类型，我们会综合考虑选择最终书目。
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 63人参与</span>
          <span><i class="fa fa-clock-o"></i> 已结束</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">多选投票（已结束）</div>
        
        <div class="option-text voted-option">
          <div class="option-label">科幻小说</div>
          <div class="option-desc">包含科幻元素的小说作品</div>
          <div class="option-checkbox checked"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 65%;"></div>
            </div>
            <div class="progress-text">
              <span>65%</span>
              <span>41票</span>
            </div>
          </div>
        </div>
        
        <div class="option-text">
          <div class="option-label">历史传记</div>
          <div class="option-desc">历史事件或人物传记</div>
          <div class="option-checkbox"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 38%;"></div>
            </div>
            <div class="progress-text">
              <span>38%</span>
              <span>24票</span>
            </div>
          </div>
        </div>
        
        <div class="option-text voted-option">
          <div class="option-label">心理学</div>
          <div class="option-desc">心理学相关著作</div>
          <div class="option-checkbox checked"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 52%;"></div>
            </div>
            <div class="progress-text">
              <span>52%</span>
              <span>33票</span>
            </div>
          </div>
        </div>
        
        <div class="option-text">
          <div class="option-label">经典文学</div>
          <div class="option-desc">经典文学作品</div>
          <div class="option-checkbox"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 45%;"></div>
            </div>
            <div class="progress-text">
              <span>45%</span>
              <span>28票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn voted" disabled>已投票</button>
      </div>
      
      <div class="vote-actions">
        <div class="vote-action" onclick="showComments(this)">
          <i class="fa fa-comment-o"></i>
          <span>评论 (15)</span>
        </div>
        <div class="vote-action" onclick="shareVote(this)">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="vote-action" onclick="saveVote(this)">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-calendar nav-icon"></i>
      <span>活动</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-bar-chart nav-icon"></i>
      <span>投票</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选标签切换
    document.querySelectorAll('.filter-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 选择投票选项
    function selectOption(option, isMultiple) {
      // 如果是已投票状态，不允许再次选择
      if (option.closest('.vote-options').querySelector('.vote-btn').classList.contains('voted')) {
        return;
      }
      
      // 单选逻辑
      if (!isMultiple) {
        // 清除同组其他选项的选中状态
        const siblings = option.parentElement.querySelectorAll('.option-text, .option-single-img, .option-multi-img');
        siblings.forEach(sib => {
          sib.classList.remove('selected');
          const radio = sib.querySelector('.option-radio');
          if (radio) radio.classList.remove('checked');
        });
        
        // 设置当前选项为选中状态
        option.classList.add('selected');
        const radio = option.querySelector('.option-radio');
        if (radio) radio.classList.add('checked');
      } 
      // 多选逻辑
      else {
        option.classList.toggle('selected');
        
        // 单图选项的选中状态处理
        if (option.classList.contains('option-single-img')) {
          // 检查是否已有选中标记，没有则创建
          let checkbox = option.querySelector('.option-checkbox');
          if (!checkbox) {
            checkbox = document.createElement('div');
            checkbox.className = 'option-checkbox';
            option.appendChild(checkbox);
            // 调整内容边距
            const info = option.querySelector('.option-info');
            info.style.paddingRight = '40px';
          }
          checkbox.classList.toggle('checked');
        } 
        // 多图文本选项的选中状态处理
        else {
          const checkbox = option.querySelector('.option-checkbox');
          if (checkbox) checkbox.classList.toggle('checked');
        }
        
        // 检查选中数量是否超过限制
        const maxSelect = 3;
        const selectedCount = option.parentElement.querySelectorAll('.selected').length;
        if (selectedCount >= maxSelect) {
          // 禁用未选中的选项
          const options = option.parentElement.querySelectorAll('.option-text, .option-single-img, .option-multi-img');
          options.forEach(opt => {
            if (!opt.classList.contains('selected')) {
              opt.style.opacity = '0.6';
              opt.style.pointerEvents = 'none';
            }
          });
        } else {
          // 启用所有选项
          const options = option.parentElement.querySelectorAll('.option-text, .option-single-img, .option-multi-img');
          options.forEach(opt => {
            opt.style.opacity = '1';
            opt.style.pointerEvents = 'auto';
          });
        }
      }
    }
    
    // 提交投票
    function submitVote(btn) {
      const voteOptions = btn.parentElement;
      const selectedOptions = voteOptions.querySelectorAll('.selected, .option-checkbox.checked, .option-radio.checked');
      
      if (selectedOptions.length === 0) {
        alert('请至少选择一个选项');
        return;
      }
      
      // 更改按钮状态
      btn.textContent = '已投票';
      btn.classList.add('voted');
      btn.disabled = true;
      
      // 更新投票进度（模拟）
      selectedOptions.forEach(option => {
        // 找到对应的进度条
        let progressBar;
        if (option.classList.contains('option-checkbox') || option.classList.contains('option-radio')) {
          progressBar = option.parentElement.querySelector('.progress-bar');
        } else {
          progressBar = option.querySelector('.progress-bar');
        }
        
        if (progressBar) {
          const currentWidth = parseInt(progressBar.style.width);
          const newWidth = Math.min(100, currentWidth + 1); // 模拟增加1%
          progressBar.style.width = newWidth + '%';
          
          // 更新百分比文本
          const progressText = progressBar.parentElement.nextElementSibling;
          if (progressText) {
            const percentSpan = progressText.querySelector('span:first-child');
            percentSpan.textContent = newWidth + '%';
            
            // 更新票数（简单计算）
            const voteCountSpan = progressText.querySelector('span:last-child');
            const count = parseInt(voteCountSpan.textContent);
            voteCountSpan.textContent = (count + 1) + '票';
          }
        }
      });
      
      // 更新参与人数
      const voteMeta = btn.closest('.vote-item').querySelector('.vote-meta span:first-child');
      if (voteMeta) {
        const count = parseInt(voteMeta.textContent.match(/\d+/)[0]);
        voteMeta.innerHTML = `<i class="fa fa-users"></i> ${count + 1}人参与`;
      }
      
      alert('投票成功！');
    }
    
    // 显示评论
    function showComments(el) {
      const commentCount = el.querySelector('span').textContent.match(/\d+/)[0];
      const voteTitle = el.closest('.vote-item').querySelector('.vote-title').textContent;
      alert(`查看 "${voteTitle}" 的 ${commentCount} 条评论`);
    }
    
    // 分享投票
    function shareVote(el) {
      const voteTitle = el.closest('.vote-item').querySelector('.vote-title').textContent;
      alert(`分享投票: "${voteTitle}"`);
    }
    
    // 收藏投票
    function saveVote(el) {
      const icon = el.querySelector('i');
      if (icon.classList.contains('fa-bookmark-o')) {
        icon.classList.remove('fa-bookmark-o');
        icon.classList.add('fa-bookmark');
        el.querySelector('span').textContent = '已收藏';
        alert('收藏成功');
      } else {
        icon.classList.remove('fa-bookmark');
        icon.classList.add('fa-bookmark-o');
        el.querySelector('span').textContent = '收藏';
        alert('已取消收藏');
      }
    }
    
    // 创建投票
    document.getElementById('createVoteBtn').addEventListener('click', function() {
      alert('跳转到创建投票页面');
    });
  </script>
</body>
</html>
